<script setup>
import { onBeforeMount, ref } from 'vue'
// import { showToast } from 'vant'
// import router from '@/router'
import { getSearchcinemas } from '@/api/zeng.js'
// 路由参数 的接收
import { useRoute,useRouter } from 'vue-router'
const route = useRoute()

const router = useRouter()
const searchcinemas = ref(null)
const val = route.query.val
console.log(val)

onBeforeMount(() => {
  // 你可以在这里进行数据的初始化等操作
})

// 调用 API 获取数据
getSearchcinemas(val).then((res) => {
  // console.log('getSearchcinemas', res.data.cinemas)
  searchcinemas.value = res.data.cinemas
})

// 跳转影院详情页 -lxz
function ToCinema(id) {
  // console.log("id",id);
  
  router.push({ path: '/cinemaDetails', query: { id: id } })
}
</script>
<template>
  <div style="box-sizing: border-box">
    <header>
      <div class="back" @click="$router.back()">
        <van-icon name="arrow-left" size="30" color="#fff" />
      </div>
      <div class="title">猫眼电影</div>
    </header>

    <main>
      <!-- 影院列表 -->
      <div class="cinema" v-if="searchcinemas">
        <div v-for="cinema in searchcinemas" :key="cinema.id" class="cinemaItem" @click="ToCinema(cinema.id)">
          <div class="content">
            <div class="title-box">
              <h3 class="text-ellipsis">{{ cinema.nm }}</h3>
              <p class="text-ellipsis">{{ cinema.sellPrice }}</p>
            </div>
            <p class="addr text-ellipsis">
              <span class="add1 text-ellipsis">{{ cinema.addr }}</span>
              <span>{{ cinema.distance }}</span>
            </p>
            <div class="icon">
              <span class="green" v-for="icon in cinema.hallType" :key="icon">
                {{ icon }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
    

<style lang="less" scoped>
header {
  background-color: #fff;
  border-bottom: 1px solid #00000018;
  position: relative;

  .back {
    position: absolute;
    left: 10rem;
    top: 12rem;
  }

  .title {
    background-color: #e54847;
    font-size: 18rem;
    text-align: center;
    height: rem;
    padding: 0.12rem;
    color: #fff;
    height: 50rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
.cinema {
  overflow-x: hidden; /* 防止子元素溢出 */
  background-color: #fff;
  padding: 12rem;
  box-sizing: border-box;
  .cinemaItem {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 8rem 0;
    border-bottom: 1px solid #00000018;

    .content {
        width: 100%;
      .title-box {
        display: flex;
        align-items: center;
        h3 {
          font-size: 17rem;
          color: #333;
          font-weight: 700;
          margin: 6rem 0;
          max-width: 70%;
        }
        p {
          font-size: 17rem;
          color: #e54847;
          margin-left: 10rem;
          &::after {
            content: '元起';
            font-size: 11rem;
            color: #999;
          }
        }
      }
      .addr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .add1 {
          max-width: 70%;
        }
      }
      .icon {
        font-size: 11rem;
        margin-top: 10rem;
        overflow: hidden;
        span {
          display: inline-block;
          margin-bottom: 10rem;
          padding: 0rem 4rem;
          border: 0.02rem solid;
          margin-right: 10rem;
          &.green {
            border-color: #589daf;
            color: #589daf;
          }
          &.yellow {
            color: #f90;
            border-color: #f90;
          }
        }
      }
      p {
        font-size: 13rem;
        color: #999;
        margin: 0;
        margin-top: 6rem;
      }
    }

    p {
      font-size: 12rem;
      color: #999;

      .score {
        font-weight: 700;
        color: #faaf00;
        font-size: 15rem;
        margin-left: 4rem;
      }
    }
  }
}
// 单行文本溢出
.text-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>    